<template>
  <div>
    <!-- 播放 start -->
    <div class="video">
      <van-icon
        name="cross"
        size="20"
        color="#fff"
        class="close"
        @click="onBack"
      />
      <video
        class="play"
        autoplay
        controls
        :src="url"
        v-if="type === 'video'"
      ></video>
      <iframe class="play" :src="url" v-if="type === 'vz'"></iframe>
    </div>
    <!-- 播放 end -->
  </div>
</template>

<script>
import { Icon } from "vant";
export default {
  name: "ZBJVideo",
  components: {
    [Icon.name]: Icon,
  },
  // 定义属性
  data() {
    return {
      url: "",
      type: "",
    };
  },
  mounted() {
    this.url = decodeURI(this.$route.query.url);
    this.type = this.$route.query.type;
  },
};
</script>

<style scoped>
/* 播放 */
.video {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #666;
}

.video .close {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.video .play {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
